<template>
	<view>
		<view class="login" v-if="loginStatus">
			<view class="loginFormView">
				<view class="usernameView">用户名</view>
				<input class="uni-input" placeholder="请输入用户名" type="text" v-model="form.username">
				<view class="passwordView">密码</view>
				<input class="uni-input" placeholder="请输入密码" type="password" v-model="form.password">
			</view>

			<button @click="login">点击登录用户</button>
		</view>


		<view class="my" v-else>
			<!-- 背景图片区域 -->
			<view class="bgcImage">
				<!-- 用户信息区域 -->
				<view class="userInfo">
					<!-- 头像 -->
					<view class="userAvatar">
						<!-- <open-data type="userAvatarUrl"></open-data> -->
						<!-- <img src="" alt=""> -->
					</view>

					<!-- Txt -->
					<view class="userInfoTxt">
						<!-- 姓名 -->
						<view class="userName">
							<!-- <open-data type="userNickName"></open-data> -->
							<view class="name-text">
								{{userMsg.name}}
							</view>
						</view>
						<!-- 学院 -->
						<view class="userAcademy">
							<view class="guestAcademy">{{userMsg.phoneNum}}</view>
						</view>
					</view>
				</view>
				<!-- 班级/专业Dialog -->
				<!-- <view class="userInfoDialog">
					<block wx:for="{{userInfo}}" wx:key="index">
						<template is="userInfo_item" data="{{item}}">
						</template>
					</block>
				</view> -->
			</view>
			<!--  关于我们...Dialog -->
			<view class="more">
				<block v-for="(item,index) in list" :key="index">
					<!-- <template is="navigate_item" data="{{item, right:'images/right.png'}}"></template> -->
					<view class="lastDialog">
						{{item.title}}
					</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					username: '',
					password: ''
				},
				loginStatus: true,
				userMsg: uni.getStorageSync('userInfo'),
				list: [{
					// icon: "images/aboutUs.png",
					title: "关于我们",
					click: "about"
				}, {
					// icon: "images/update.png",
					title: "更新日志",
					click: "journal"
				}, {
					// icon: "images/login.png",
					title: "登录/注销账号",
					click: "login"
				}],
			};


		},
		methods: {
			login() {
				uni.request({
					url: 'http://127.0.0.1:3000/users/login',
					method: 'POST',
					timeout: 5000,
					data: this.form,
					success: (res) => {
						res = res.data
						if (res.status == 200) {
							this.userMsg = res.data
							uni.setStorage({
								key: 'userInfo',
								data: res.data,
								// success: function () {
								// 	console.log('success');
								// }
							});

							uni.showToast({
								title: '用户登录成功',
								complete: () => {
									this.form = {}
									this.loginStatus = false
									
								}
							})
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'error',
								complete: () => this.form = {}
							})
						}
					},
					fail: (res) => {
						uni.showToast({
							title: '获取数据失败',
							icon: 'error',
							complete: () => this.form = {}
						})
					}
				});

			},

			getUserInfo() {
				try {
					const value = uni.getStorageSync('userInfo');
					if (value) {
						this.userMsg = value
						this.loginStatus = false
						console.log(value);
					}
				} catch (e) {
					// error
					console.log(e);
				}
			},
		},
		onLoad() {
			this.getUserInfo()
		}
	}
</script>

<style lang="scss">
	.loginFormView {
		padding: 10px;

		.usernameView,
		.passwordView {
			margin: 10px 0;
			font-size: 18px;
			font-weight: 500;
		}
	}



	.bgcImage {
		position: relative;
		width: 100%;
		height: 400rpx;
		background-color: skyblue;
	}

	.userInfo {
		position: absolute;
		left: 80rpx;
		top: 45%;
		display: flex;
		justify-content: space-between;
	}

	/* 头像 */
	.userAvatar {
		display: flex;
		overflow: hidden;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		background-color: #fff;
	}

	/* 角色信息text */
	.userInfoTxt {
		margin: 10rpx 0 0 20rpx;
		color: rgb(233, 253, 253);
		letter-spacing: 3rpx;
	}

	.userName {
		margin-bottom: 10rpx;
	}

	.userAcademy {
		font-size: 20rpx;
	}

	/* 班级/专业 */
	.userInfoDialog {
		position: absolute;
		bottom: -150rpx;
		margin: 0 20rpx;
		width: 710rpx;
		height: 200rpx;
		background-color: #fff;
		border: 1rpx solid #ccc;
		border-radius: 20rpx;
		box-shadow: #ccc 0 0 5rpx 2rpx;
		color: rgb(106, 106, 106);
	}

	/* 第二个Dialog */
	.more {
		margin: 0 20rpx;
		margin-top: 170rpx;
		width: 710rpx;
		height: 300rpx;
		background-color: #fff;
		border: 1rpx solid #ccc;
		border-radius: 20rpx;
		box-shadow: #ccc 0 0 5rpx 2rpx;
		color: rgb(106, 106, 106);
		display: flex;
		flex-direction: column;
		align-items: center;

		.lastDialog {
			margin: 10px 0;
			width: 100%;
			height: 100%;
			// background-color: blue;
			font-size: 18px;
			padding: 0 10px;
		}
	}
</style>
